<template>
  <div class="cc-calendar">
    <div class="calendar-title">
      <span>{{ year }}年{{ month + 1 }}月</span>
    </div>
    <ul class="calendar-week">
      <li
        v-for="(item, index) in calendarTitleArr"
        :key="index"
        class="week-item"
      >
        {{ item }}
      </li>
    </ul>
    <ul class="calendar-view">
      <!-- 动态设置背景颜色 -->
      <li
        v-for="(item, index) in visibleCalendar"
        :key="index"
        class="date-view"
        :style="{
          background:
            isPublicWeekend(item.date) &&
            isCurrentMonth(item.date) &&
            !handleData(item.date)
              ? 'rgba(235,51,51,.05)'
              : handleData(item.date) && isCurrentMonth(item.date)
              ? `${handleData(item.date).c_background} !important`
              : !isCurrentMonth(item.date)
              ? 'rgba(0,0,0,0.015)'
              : '#fff',
        }"
        @click="clickCalender(item)"
      >
        <span
          class="date-day"
          :class="[{ 'opacity-class': !isCurrentMonth(item.date) }]"
          :style="{
            color:
              handleData(item.date) && isCurrentMonth(item.date)
                ? handleData(item.date).color
                : '#333',
          }"
        >
          {{ item.day }}
        </span>
        <span
          v-if="handleData(item.date) && isCurrentMonth(item.date)"
          class="calendar-num"
          :style="{
            background:
              handleData(item.date) && isCurrentMonth(item.date)
                ? handleData(item.date).t_background
                : !isCurrentMonth(item.date)
                ? 'rgba(0,0,0,0.015)'
                : '#fff',
          }"
        >
          {{
            handleData(item.date) && isCurrentMonth(item.date)
              ? handleData(item.date).pollution
              : ""
          }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script setup name="DateCalendar" lang="ts">
import {
  getNewDate,
  getDate,
  formatDate,
  colorList,
  isWhichDay,
} from "./index";
const props = defineProps({
  year: {
    type: [String, Number],
    default: 2022,
  },
  freeDates: {
    type: Array,
    default: () => [],
  },
  planDates: {
    type: Array,
    default: () => [],
  },
  month: {
    type: [String, Number],
    default: 0,
  },
  list: {
    type: Array,
    default: () => [],
  },
});

const { planDates, freeDates } = toRefs(props);

function uploadCalendar() {}
const calendarTitleArr = ref(["一", "二", "三", "四", "五", "六", "日"]);
const colorLists = ref(colorList);
const visibleCalendar = computed(() => {
  let calendatArr = [];
  let { year, month } = getNewDate(getDate(props.year, props.month, 1));

  let currentFirstDay: any = getDate(year, month, 1);

  // 获取当前月第一天星期几
  let weekDay: number = currentFirstDay.getDay();
  let startTime = null;
  if (weekDay == 0) {
    // 当月第一天是星期天
    startTime = currentFirstDay - 6 * 24 * 60 * 60 * 1000;
  } else {
    startTime = currentFirstDay - (weekDay - 1) * 24 * 60 * 60 * 1000;
  }
  // let monthDayNum;
  // 当第一天是周五 周六 周日 这个月绘制42天数据 否则为35天
  // if (weekDay == 5 || weekDay == 6 || weekDay == 0) {
  //   monthDayNum = 42;
  // } else {
  //   monthDayNum = 35;
  // }
  // for (let i = 0; i < monthDayNum; i++) {
  // 为了页面整齐排列 一并绘制42天
  for (let i = 0; i < 42; i++) {
    calendatArr.push({
      date: new Date(startTime + i * 24 * 60 * 60 * 1000),
      // year: year,
      // month: month + 1,
      year: new Date(startTime + i * 24 * 60 * 60 * 1000).getFullYear(),
      month: new Date(startTime + i * 24 * 60 * 60 * 1000).getMonth() + 1,
      day: new Date(startTime + i * 24 * 60 * 60 * 1000).getDate(),
    });
  }
  return calendatArr;
});
function isPublicWeekend(value: Date) {
  return isWhichDay(value, freeDates.value);
}
function handleData(date: any) {
  const data = planDates.value;
  data.length &&
    data.forEach((item: any) => {
      let list = colorLists.value.filter((itm) => itm.name === item.pollution);
      item.c_background = list[0].c_background;
      item.t_background = list[0].t_background;
      item.color = list[0].color;
    });
  let { year, month, day } = getNewDate(date);
  let dateTime = year + "-" + formatDate(month + 1) + "-" + formatDate(day);
  let list = null;
  data.forEach((item: any) => {
    if (item.time == dateTime) {
      list = item;
    }
  });
  return list;
}
// 是否是当前月
function isCurrentMonth(date) {
  let { year: currentYear, month: currentMonth } = getNewDate(
    getDate(props.year, props.month, 1)
  );
  let { year, month } = getNewDate(date);
  return currentYear == year && currentMonth == month;
}
// 点击日历中的单元格
function clickCalender(item) {
  // console.log("点击单元格", item);
}
</script>

<style lang="scss" scope>
body,
ul,
ol,
li {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

.cc-calendar {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.04);
  overflow: visible;

  .calendar-title {
    width: 100%;
    font-size: 14px;
    font-family: "DINAlt";
    font-weight: 500;
    color: #061a19;
    text-align: center;
    height: 26px;
    line-height: 26px;
  }

  .calendar-week {
    display: flex;
    height: 30px;
    line-height: 30px;
    border-right: none;
    border-left: none;

    .week-item {
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: #061a19;
      font-weight: 400;
    }
  }

  .calendar-view {
    display: flex;
    flex-wrap: wrap;

    .date-view {
      // width: 40px;
      flex: 0 0 calc(100% / 7);
      height: 34px;
      text-align: center;
      line-height: 34px;
      box-sizing: border-box;
      position: relative;

      .date-day {
        font-size: 12px;
        font-family: "DINLight";
        font-weight: 400;
        color: #333;
      }

      .calendar-num {
        position: absolute;
        font-size: 10px;
        padding: 1px;
        font-family: "DINAlt";
        font-weight: 400;
        color: #062927;
        color: #fff;
        right: 0;
        top: 0;
        line-height: 10px;
      }
    }

    .opacity-class {
      opacity: 0.4;
    }
  }
}
</style>
